import { defineComponent, reactive, ref, h } from "vue";
import { getRelatedStocks } from "../../util/dxjsonp";
import MoreOperations from "../MoreOperations.vue";
export default defineComponent({
  props: {
    BK: {
      type: String,
    },
  },
  setup(props) {
    let tableData = ref([]);
    const paginationReactive = reactive({
      page: 1,
      pageCount: 1,
      pageSize: 15,
    });
    let show = ref(false);
    let columns = [
      {
        title: "代码",
        key: "f12",
        align: "center",
      },
      {
        title: "名称",
        key: "f14",
        align: "center",
      },
      {
        title: "最新",
        key: "",
        align: "center",
        render(row) {
          return (row.f2 / 100).toFixed(2);
        },
      },
      {
        title: "涨幅",
        key: "",
        align: "center",
        render(row) {
          return (row.f3 / 100).toFixed(2) + "%";
        },
      },
      {
        title: "操作",
        key: "",
        align: "center",
        render(row) {
          row.secCode = row.f12;
          row.announcementTitle =
            "行业板块 日涨幅" + (row.f2 / 100).toFixed(2) + "%";
          return h(MoreOperations, {
            obj: [
              {
                label: "添加行业板块观察",
                key: "13",
              },
            ],
            rowData: row,
            onOperateFun: () => {
              show.value = false;
            },
            onShowLoad: () => {
              show.value = true;
            },
          });
        },
      },
    ];
    const operateFun = () => {
      show.value = false;
    };
    const initData = async () => {
      let { diff, total }: any = await getRelatedStocks(
        props.BK,
        paginationReactive.page,
        paginationReactive.pageSize
      );
      let totals = parseInt("" + total / paginationReactive.pageSize);
      paginationReactive.pageCount = totals + 1;
      tableData.value = [];
      for (let key in diff) {
        tableData.value.push(diff[key]);
      }
    };
    initData();

    const rowClassName = (row, index) => {
      if (row.f3 >= 0) {
        return "red";
      }
      return "ls";
    };
    const handlePageChange = (page) => {
      console.log(page);
      paginationReactive.page = page;
      initData();
    };
    return () => (
      <>
        <n-spin show={show.value}>
          <n-data-table
            size="small"
            class="mt10"
            max-height="800"
            row-class-name={rowClassName}
            pagination={paginationReactive}
            columns={columns}
            data={tableData.value}
            single-line="false"
            remote
            onUpdate:page={handlePageChange}
          />
        </n-spin>
      </>
    );
  },
});
